<template>
	<view>
		<view class="p15">
			<uni-card>
				<view class="choose">
					<input class="input" type="text" placeholder-class="d1Colors" v-model="customerName" placeholder="输入客户姓名" />
				</view>
			</uni-card>

			<uni-card>
					<picker @change="models" range-key="name" :range="sex" :disabled="isdisabled">
						
						<view class="choose">
							<input class="input" placeholder-class="d1Colors" disabled="disabled" :value="name" placeholder="请选择性别" />
							<uni-icons type="arrowright" size="10"></uni-icons>
						</view>
					</picker>
			</uni-card>
			<uni-card>
				<view class="choose">
					<input class="input" type="text" placeholder-class="d1Colors" v-model="customerCompany" placeholder="输入公司名称" />
				</view>
			</uni-card>
			<uni-card>
				<view class="choose">
					<input class="input" type="number" placeholder-class="d1Colors" v-model="phoneNumber" placeholder="输入联系方式" />
				</view>
			</uni-card>
			<button type="default" @click="submitMaintains">提交</button>
		</view>
	</view>
</template>

<script>
	import fuckTextarea from '@/components/fuck-textarea/fuck-textarea.vue'
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	import fault from "@/serve/api/fault.js"
	import submit from "@/serve/api/submit.js"
	import {
		imgSet
	} from "@/serve/api/imgSet.js"
	export default {
		components: {
			fuckTextarea,
			uniTag,
		},
		data() {
			return {
				customerName: '', //客户名称
				customerCompany: '', //公司名称
				phoneNumber: '', //联系方式
				isdisabled: false,
				sex: [{
					name: '男',
					id: '1'
				},{
					name:'女',
					id:'2'
				} ],
				name:'',
				id:'',
				ind:"",
			}
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id
				this.ind = e.index
				this.news(e.id)
			}
		},
		methods: {
			async news(id) {
				let parme = {
					customerId:id
				}
				const res = await submit.selectCustomerById(parme);
				this.customerName = res.data.data.customerName
				this.customerCompany = res.data.data.customerCompany
				this.phoneNumber = res.data.data.phoneNumber
				this.name = res.data.data.sex
			},
			async models(e) {
				this.name = this.sex[e.detail ? e.detail.value : e].name
			},
			//表单提交
			async submitMaintains(e) {
				if (!this.customerName) {
					uni.showToast({
						title: '请输入客户名称',
						icon: 'none'
					})
					return
				}
				if (!this.customerCompany) {
					uni.showToast({
						title: '请输入公司名称',
						icon: 'none'
					})
					return
				}
				if (!this.name) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
					return
				}
				if (!this.phoneNumber) {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none'
					})
					return
				}
				let parme = {
					customerName:this.customerName,
					customerCompany:this.customerCompany,
					sex:this.name,
					phoneNumber:this.phoneNumber,
					customerId:this.id
				}
				const res = await submit.saveCustomerInfo(parme);
				console.log(res)
				if (res) {
						let page = getCurrentPages();
						let prevPage = page[page.length - 2];
					if(this.id){
						// #ifdef H5
						prevPage.dataList.splice(this.ind,1,res.data.data)
						// #endif
						// #ifdef APP-PLUS
						prevPage.$vm.dataList.splice(this.ind,1,res.data.data)
						// #endif
					}else{
						// #ifdef H5
						prevPage.dataList.unshift(res.data.data)
						prevPage.technologicalProcess[0].num = prevPage.technologicalProcess[0].num + 1
						// #endif
						// #ifdef APP-PLUS
						prevPage.$vm.dataList.unshift(res.data.data)
						prevPage.$vm.technologicalProcess[0].num = prevPage.$vm.technologicalProcess[0].num + 1
						// #endif
					}
					
					uni.navigateBack({})
				}
			},

		}

	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	page {
		width: 750rpx;
		background: #EFF2F5;
		overflow: hidden;
	}

	view {
		font-size: 28rpx;
		line-height: 1.8;

	}

	.d1Color {
		color: #323232;
		font-size: 14px;
	}

	.d1Colors {
		color: #ADB5C5;
		font-size: 14px;
	}

	.uni-card {
		width: 100%;
		/* height: 96rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		border: none;
		margin: 0 auto;

		margin-top: 20rpx;

	}

	.choose {
		display: flex;
		flex-direction: row;
		/* flex-wrap: wrap; */
		justify-content: space-between;
		text-align: center;
		align-items: center;
	}

	.input {
		text-align: left;
		font-size: 14px;
		width: 95%;
	}

	/* 上传图片 */
	.upload {
		height: 196rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		text-align: center;
		position: relative;
	}

	.photograph {
		position: absolute;
		top: 0;
		bottom: 0;
		transform: translate(-50% -50%);
		margin: 0 auto;
	}

	.photograph image {
		width: 64rpx;
		height: 52rpx;
		vertical-align: middle;
		margin: 25rpx;
	}

	.photograph view {

		font-size: 30rpx;
		font-weight: 400;
		color: #989BA6;

	}

	.upload-img {
		width: 177rpx;
		height: 29rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 29rpx;
	}

	.camera {
		margin: 0 auto;
	}

	/* 标签 */
	.uni-tag {
		width: 250rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		display: inline-block;
		margin: 10rpx;
	}

	.tag {
		padding: 5px 15px;
		background-color: #FFFFFF;
		margin: 20px 0 0 0;
		border-radius: 25px;

		/* width: 50%; */
		/* margin: 0 auto; */

	}

	.active {
		color: #FFFFFF;
		background-color: #017EFE;
	}

	.uni-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

	}

	.p15 {
		padding: 0 20px;
		box-sizing: border-box;
	}

	button {
		width: 670rpx;
		height: 52px;
		background: #017EFE;
		box-shadow: 0px 5px 7px 0px rgba(1, 126, 254, 0.2);
		border-radius: 26px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 52px;
		margin: 50px auto 34px;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: transparent;
	}
</style>
